<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>
  // 需求：已知对象target，表示要被劫持的目标对象

  // const target = {
  //   name:"admin",
  //   age:19,
  //   sex:"男"
  // }  
  // const result = proxy(target);
  // console.log(result);
  // 无法劫持将来添加的属性
  // target.msg = "hello";
  // result.msg = "hello";
  // console.log(result);

  // const target = {
  //   name:"王二",
  //   age:19,
  //   sex:"男",
  //   child:{
  //     name:"小王",
  //     age:1,
  //     sex:"女"
  //   }
  // }
  // 只能劫持对象的一层属性
  // const result = proxy(target);
  // console.log(result);
  // result.child.name = "小小王"
  
  // function proxy(abc){
  //   const ops = {};
  //   for(let i in abc){
  //     ops[i] = {
  //       get(){
  //         console.log(`有人访问了obj的${i}`)
  //         return abc[i]
  //       },
  //       set(val){
  //         console.log(`有人修改了obj的${i}，值为${val}`)
  //         abc[i] = val;
  //       }
  //     }
  //   }
  //   return Object.defineProperties({}, ops);
  // }


  // ========

  // 需求：已知对象target，表示要被劫持的目标对象
  const target = {
    name:"张三",
    sex:"男",
    child:{
      name:"小张",
      sex:"男"
    }
  }
  const result = new Proxy(target, {
    get(o, i){
      console.log(`有人访问了${o.name}的${i}`)
      return o[i];
    },
    set(o, i, val){
      console.log(`有人修改了${o.name}的${i}为${val}`)
      o[i] = val;
    }
  });

  result.sex = "hahaha";
  result.child.name = "小小张";

  // 因为操作代理后的对象不存在的属性，也会触发代理时定义的访问器和控制器
  // 所以将来给代理后的对象添加的属性，也会触发访问器或控制器
  result.age = 18;

  // console.log(result.sex)
  // console.log(result.age)
  // console.log(result.name)

  console.log(result.msg)

  console.log(result.child)
  console.log(result.child.name)

  console.log(result)

  // 递归



  
</script>
</html>